<template>
    <div></div>
    <el-card shadow="hover">
        <div class="clock">
            <div class="time">
                <svg-icon icon-class="time"></svg-icon>
                <span class="time">{{ hours }}</span>
                <span class="separator">:</span>
                <span class="time">{{ minutes }}</span>
                <span class="separator">:</span>
                <span class="time">{{ seconds }}</span>
            </div>
            <div class="date">
                <el-text type="primary">
                    <span>{{ year }}年</span>
                    <span>{{ month }}月</span>
                    <span>{{ day }}日</span>
                </el-text>
            </div>
        </div>
    </el-card>
</template>
<script>
export default {
    title: '时钟',
    icon: 'AlarmClock',
    description: '当前时间',
};
</script>
<script setup>
import { ref, onMounted } from 'vue';
// 定义响应式变量
const hours = ref('00');
const minutes = ref('00');
const seconds = ref('00');
const year = ref('0000');
const month = ref('00');
const day = ref('00');

// 更新时间和日期的函数
const updateClock = () => {
    const now = new Date();
    hours.value = String(now.getHours()).padStart(2, '0');
    minutes.value = String(now.getMinutes()).padStart(2, '0');
    seconds.value = String(now.getSeconds()).padStart(2, '0');
    year.value = now.getFullYear();
    month.value = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
    day.value = String(now.getDate()).padStart(2, '0');
};

onMounted(() => {
    updateClock(); // 初始化
    setInterval(updateClock, 1000); // 每秒更新
});
</script>

<style scoped>
.clock {
    font-family: Arial, sans-serif;
    /* color: #333; */
    display: flex;
    /* flex-direction: column; */
    font-size: 35px;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.time {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.4rem;
    border-radius: 0.2rem;
    /* background-color: #fff; */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.date {
    font-size: 14px;
    align-self: flex-end;
}

.separator {
    line-height: 1;
}
</style>